<template>
  <div>
    <button
      :class="{
        haha:true,
        primary: type === 'primary',
        success: type === 'success',  
      }"
       @click='fn(123)'
    >
      {{ title }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    type: String,
  },
  methods:{
    fn(...arr){
      this.$emit('click',...arr);
    }
  }
};
</script>

<style strode>
.haha {
  width: 100px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: #937bb5;
}
.haha:hover {
  background-color: #ecf5ff;
}
.primary {
  width: 100px;
  height: 40px;
  background-color: rgb(64, 158, 255);
  border: 0;
  border-radius: 5px;
  color: #fff;
}
.primary:hover {
  background-color: #66b1ff;
}
.success {
  width: 100px;
  height: 40px;
  background-color: #67c23a;
  border: 0;
  border-radius: 5px;
  color: #fff;
}
.success:hover {
  background-color: #85ce61;
}

</style>
